<blockquote class="layui-elem-quote">
    <div class="layui-inline">
        <i class="layui-icon layui-icon-list layui-head-icon"></i>
        <span class="layui-font-16 layui-font-green">添加任务</span>
    </div>
</blockquote>
<div class="layui-card">
    <div class="layui-card-body">
        <form class="layui-form">
            <div class="layui-form-item">
                <label class="layui-form-label">任务类型</label>
                <div class="layui-input-block">
                    <input type="radio" name="task_type" value="1" lay-filter="task_type" checked title="参与邀请好友注册">
                    <input type="radio" name="task_type" value="2" lay-filter="task_type" title="参与购买会员">
                    <input type="radio" name="task_type" value="3" lay-filter="task_type" title="参与拼团活动">
                    <input type="radio" name="task_type" value="4" lay-filter="task_type" title="参与发布转卖商品">
                    <input type="radio" name="task_type" value="5" lay-filter="task_type" title="参与购买转卖商品">
                </div>
            </div>
            <div class="layui-form-item" id="join-num">
                <label class="layui-form-label">参与次数</label>
                <div class="layui-input-inline">
                    <input type="number" autocomplete="off" value="1" name="join_num" class="layui-input"
                           placeholder="请输入输入人数">
                </div>
            </div>
            <div class="layui-form-item layui-hide" id="combo">
                <label class="layui-form-label">选择套餐</label>
                <div class="layui-input-block">
                    <select name="user_combo_id">
                        <option value=""></option>
                        {foreach $comboOptions as $opt}
                            <option value="{$opt.id}">{$opt.combo_name}</option>
                        {/foreach}
                    </select>
                    <div class="layui-form-mid layui-word-aux layui-font-red">不指定购买套餐,则购买任意套餐即可完成任务</div>
                </div>
            </div>
            <div class="layui-form-item layui-hide" id="activity">
                <label class="layui-form-label">选择拼团活动</label>
                <div class="layui-input-block">
                    <div class="layui-inline">
                        <input type="text" disabled style="width: 800px;" id="activity-title" autocomplete="off"
                               class="layui-input">
                        <input type="hidden" name="group_activity_id" id="group-activity-id" value="0">
                    </div>
                    <div class="layui-inline">
                        <button type="button" class="layui-btn" id="choose-group-activity">选择</button>
                    </div>
                </div>
                <div class="layui-form-mid layui-word-aux layui-font-red">不指定拼团活动,则参与任意拼团活动即可完成任务</div>
            </div>

            <div class="layui-form-item">
                <label class="layui-form-label">奖励积分</label>
                <div class="layui-input-inline">
                    <input type="number" autocomplete="off" value="1" name="give_integral" class="layui-input"
                           placeholder="请输入输入人数">
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label">赠送优惠券</label>
                <div class="layui-input-block">
                    <div class="layui-inline">
                        <input type="text" id="give-coupon" style="width: 800px;" disabled placeholder=""
                               autocomplete="off" class="layui-input">
                        <input type="hidden" name="give_coupon" id="coupons-info">
                        <input type="hidden" name="param" id="param">
                    </div>
                    <div class="layui-inline">
                        <button type="button" class="layui-btn" id="choose-coupon">选择优惠券</button>
                    </div>
                </div>
                <div class="layui-input-block" id="imgs">
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label">任务到期类型</label>
                <div class="layui-input-block">
                    <input type="radio" name="expire_type" lay-filter="expire-type" value="1" checked title="领取后生效">
                    <input type="radio" name="expire_type" lay-filter="expire-type" value="2" title="固定日期">
                </div>

            </div>
            <div class="layui-form-item" id="day">
                <label class="layui-form-label">有效时间/h</label>
                <div class="layui-input-inline">
                    <input type="number" autocomplete="off" value="0" name="expire_time" class="layui-input"
                           placeholder="请输入有效天数">
                </div>
            </div>
            <div class="layui-form-item layui-hide" id="expire">
                <label class="layui-form-label">时间范围</label>
                <div class="layui-input-block" id="time">
                    <div class="layui-input-inline">
                        <input type="text" autocomplete="off" name="start_time" id="strat-time" class="layui-input"
                               placeholder="开始日期">
                    </div>
                    <div class="layui-form-mid">-</div>
                    <div class="layui-input-inline">
                        <input type="text" autocomplete="off" name="end_time" id="end-time" class="layui-input"
                               placeholder="结束日期">
                    </div>
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label">任务状态</label>
                <div class="layui-input-block">
                    <input type="radio" name="status" value="1" checked title="开启">
                    <input type="radio" name="status" value="0" title="关闭">
                </div>
            </div>
            <div class="layui-form-item">
                <div class="layui-input-block">
                    <button class="layui-btn" lay-submit lay-filter="formAdd">保存任务</button>
                </div>
            </div>
        </form>
    </div>
</div>
<script>
    //Demo
    layui.use(['form', 'laydate'], function () {
        var $ = layui.jquery, form = layui.form, laydate = layui.laydate;

        form.on('radio(expire-type)', function (data) {
            if (data.value==1){
                $('#expire').addClass('layui-hide');
                $('#day').removeClass('layui-hide');
            }

            if (data.value==2){
                $('#expire').removeClass('layui-hide');
                $('#day').addClass('layui-hide');
            }
        })

        form.on('radio(task_type)', function (data) {
            switch (data.value) {
                case "1" :
                    $('#join-num').removeClass('layui-hide');
                    $('#combo').addClass('layui-hide');
                    $('#activity').addClass('layui-hide');
                    break;
                case "2":
                    $('#combo').removeClass('layui-hide');
                    $('#join-num').addClass('layui-hide');
                    $('#activity').addClass('layui-hide');
                    break;
                case "3" :
                    $('#join-num').addClass('layui-hide');
                    $('#combo').addClass('layui-hide');
                    $('#activity').removeClass('layui-hide');
                    break;
                case "4" :
                    $('#join-num').removeClass('layui-hide');
                    $('#combo').addClass('layui-hide');
                    $('#activity').addClass('layui-hide');
                    break;
                case "5" :
                    $('#join-num').removeClass('layui-hide');
                    $('#combo').addClass('layui-hide');
                    $('#activity').addClass('layui-hide');
                    break;
            }
        });

        laydate.render({
            elem: '#time',
            type: 'datetime',
            range: ['#strat-time', '#end-time'],
            min:0
        });


        $('#choose-group-activity').click(function () {
            layer.open({
                title: ['选择拼团活动'],
                type: 2,
                area: ['1000px', '800px'],
                offset: '30px',
                btn: ['确定', '取消'],
                maxmin: true,
                content: '/store/group/activity/option?type=1',
                yes: function (index, layero) {
                    let checkEle = $(layero).find('iframe').contents().find('input[type="radio"]:checked');
                    let id = checkEle.val();
                    if (!id) {
                        layer.msg('请选择拼团活动!', {icon: 2});
                        return false;
                    }

                    parent.$('#group-activity-id').val(id);
                    parent.$('#activity-title').val(checkEle.parents('tr').find('.activity-title').text());

                    parent.layer.close(index);
                }
            });

        });

        function getUseCouponInfo(param) {

            $('#param').val(JSON.stringify(param));

            let coupons = [], name = '', img = '';

            param.forEach(function (item) {
                coupons.push({
                    coupon_id: item.coupon_id,
                    give_num: item.give_num
                });
                name += item.coupon_name + ';;',
                    img += '<div class="layui-inline"> ' +
                        '<img src="' + item.coupon_icon + '" class="layui-view-img">' +
                        '<i data-id="' + item.coupon_id + '" class="layui-icon layui-view-img-close">&#x1006</i>' +
                        '</div>';
            });

            $('#coupons-info').val(JSON.stringify(coupons));
            $('#imgs').html(img);
            $('#give-coupon').val(name);
        }

        $(document).on('click', '.layui-view-img-close', function () {
            let couponsInfo = JSON.parse($('#param').val());
            let id = $(this).attr('data-id');

            let i = couponsInfo.findIndex(function (item) {
                return item.coupon_id == id
            });
            couponsInfo.splice(i, 1);
            getUseCouponInfo(couponsInfo);

        });

        $('#choose-coupon').click(function () {
            layer.open({
                title: ['选择优惠券'],
                type: 2,
                area: ['1000px', '800px'],
                offset: '30px',
                btn: ['确定', '取消'],
                maxmin: true,
                content: '/store/market/coupon/option',
                yes: function (index, layero) {
                    let checkbox = $(layero).find('iframe').contents().find('.son:checked');
                    if (checkbox.length < 1) {
                        layer.msg('请选择优惠券!', {icon: 2});
                        return false;
                    }

                    let couponInfo = [];

                    checkbox.each(function () {
                        couponInfo.push({
                            coupon_id: $(this).val(),
                            coupon_name: $(this).parents('tr').find('.coupon-name').text(),
                            coupon_icon: $(this).parents('tr').find('.coupon-icon').attr('src'),
                            give_num: $(this).parents('tr').find('.give_num').val()
                        });
                    })
                    let param = [];

                    let paramEle = $('#param');
                    param = paramEle.val() ? JSON.parse(paramEle.val()).concat(couponInfo) : couponInfo;

                    getUseCouponInfo(param);

                    parent.layer.close(index);
                }
            });

        });


        form.on('submit(formAdd)', function (data) {
            $.post('/store/market/task/save', data.field, function (res) {
                if (res.code == 1) {
                    layer.msg(res.msg, {icon: 1});
                    location.href='/store/market/task'
                    return  false;
                }

                return layer.msg(res.msg, {icon: 2});
            });

            return false;
        });

    });
</script>
